Use Bar Chart
Bar Chart是最常用的圖表格式,如圖二,第一筆資料為2015年1月1日Hadoop標籤於六都的正負向文章的數量,分別是76、8、71、98、11、10、49、74、97、55、98、26;單用數值無法立即理解彼此正負向文章的數量關係,最簡單的就是利用Bar Chart來呈現,圖三為使用D3.js繪製的結果。
從上方的原始碼中可以發現,本次使用的數值被裝在名為values的容器當中,而d3.scale就是本次的重點,我們產生了一個線性的比例尺y,並且指定range必須介於[0, height]也就是[0,500],domain則是[0, d3.max(values)]也就是[0,98],其中range所指的是輸出的範圍,也就是藉由比例尺y所產生出的結果必須介在0到500之間;而domain所指的是輸入的範圍,因為本次數列最大值只有到98,因此輸入必須介在0到98之間。
使用d3.max(values)是為了取出values中最大值,使這張圖表能根據數值的內容作彈性的變化,其他功能可參考D3所提供的Working with Arrays API-Reference,如表二,用法就如同一般副程式,將數值帶入即可得到對應的結果,如.attr("height", function (d) { return y(d); })中的y(d)。
《表二》Working with Arrays API-Reference 資料來源:https://github.com/mbostock/d3/wiki/API-Reference
Data Binding
接下來是D3的重頭戲,Data Binding的部分,D3雖然實作起來比較繁雜,但其彈性就可以相當的大;首先chart.selectAll("g")代表就是選擇所有標籤為g的元素,不過正常來說會找不到,因為一開始根本沒有這樣的內容,接下來就是利用.data(values)將資料傳入D3.js內,此時會回傳一個與資料大大小相同的Array,.enter()則是讓每筆資料在Array內以Object的方式存在,其值則為該Object的data屬性,如圖八所示。
《圖八》不同階段所產生出的結果
接下來就是繪圖了,由於變數bar所指向的是產生在畫面上的12個繪圖元素,根據這12個元素我們分別要產生Bar Chart跟文字,如下方程式所示,唯一要說明的只有給予attr數值時的差別,這邊允許四種方式:直接給值、匿名程式(無參數、一個參數以及兩個參數),若要將data傳入匿名程式當中就必須要採用一個參數的方式,也就是.attr("height", function (d) { return y(d); })。若同時需要data以及index則使用.attr("class", function (d, i) {if ((i % 2) == 1) return "odd";}),此時d代表data、i代表Index,這是限制。
Use Circle
使用Circle的面積來代表資料量的大小亦是常見的作法,呈現的結果如圖九。Html、Css以及JavaScript原始碼分別呈現於圖十、十一及十二,由圖例中可以發現,其實差距不大,只有將原本產生rect標籤改成circle而已,參考github網站下載之範例二。
Scale的部分就不多做說明了,Axis的部分使用到了d3內建的API,呼叫axis()產生一個新的axis產生器,允許調整innerTickSize、orient、outerTickSize、scale、tickFormat、tickPadding、tickSize、ticks以及tickValues,這個範例在x軸使用了orient將其調整於畫面的下方,而y軸則特別指定了ticks將間格分為十格。為了將x軸與y軸繪製於畫面上,必須使用在append物件後呼叫該axis產生器。
Use More Data
上述的範例都是將資料完全寫死在程式碼之中,但這樣的作法其實是完全沒有彈性的,當資料量一多就會是個災難,D3.js提供多種檔案的讀取API,如表三。
Use Transaction and Event
最後一個要介紹的東西是Transaction,由於上面的範例只使用到了一天的資料,如果希望能夠隨著使用者的選擇而變換不同的日期,才能使得這個圖表兼具互動性跟完整性;圖表隨著資料的變化如果少了中間的過場,就會變得相當奇怪。範例五希望透過滑鼠在日期文字上左右滑動後能夠切換不同的日期,因此必須要加上滑鼠移動的事件來完成這件事情,參考程式碼如圖十七,我們先新增了日期的文字並且在讀取檔案的副程式內,宣告了一個滑鼠位移的區間(名為box),在該區間上方覆蓋了一個透明的長條圖,並且在長條圖上綁定mourseover的事件(名為enableInteraction),其中內含的yearScale變數是為了要讓滑鼠左右移動的x軸座標轉換成固定範圍的數字,接著才能藉由displayDate將其轉換成日期。